﻿@using LunwenYun.Infrastructure.Entities.Entity;
@{
    Layout = "~/Views/Shared/_m_Main.cshtml";
    Periodical journal = ViewBag.Journal;
}
<div class="mini-layout graybg">
    <form id="form1" class="form-horizontal" enctype="multipart/form-data" method="post"
    action="/m/submit">
    <input type="hidden" name="Aptitude" />
    <input type="hidden" name="selectedJournal" />
    <fieldset>
        <legend style="font-weight: bold; color: #22a7b3; text-align: center">我要投稿</legend>
        <div class="control-group">
            <label class="control-label">
                稿件标题 (*)</label>
            <div class="controls">
                <input type="text" id="txtTitle" name="Title" class="span6 {required:true,maxlength:25,minlength:5}"
                    placeholder="稿件标题" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                稿件行业分类</label>
            <div class="controls">
                <select class="inline" id="sltBaseType" name="IndType">
                </select>
                --
                <select class="inline" id="sltindType" name="SubIndType">
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                目标期刊类型</label>
            <div class="controls">
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="1" />
                    核心
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="2" />
                    国家级
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="3" />
                    省级
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="4" />
                    SCI
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="5" />
                    EI
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="6" />
                    普通
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" name="AptitudeOption" value="7" />
                    其他
                </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                语言</label>
            <div class="controls">
                <label class="radio inline">
                    <input type="radio" name="Language" value="1" checked="checked" />
                    中文
                </label>
                <label class="radio inline">
                    <input type="radio" name="Language" value="2" />
                    English
                </label>
                <label class="radio inline">
                    <input type="radio" name="Language" value="9" />
                    其他
                </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                期望期刊</label>
            <div class="controls">
                <a href="#myModal" onclick="openjournalframe()" class="btn btn-link" role="button"
                    data-toggle="modal">选择期刊</a><br />
                <div class="row span7" id="targetjournal">
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                稿件描述 (*)</label>
            <div class="controls">
                <textarea placeholder="稿件描述" id="tarDescription" name="Description" rows="6" class="span6 {required:true,maxlength:1000,minlength:10}"></textarea>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                经济预算 (*)</label>
            <div class="controls">
                <input type="text" id="txtbudget" name="Budget" placeholder="填写版面费预算金额 （如：1000-2000元）"
                    class="span6 {required:true,regexp:'/^[\\d\\-\\s]*$/',messages:{regexp:'输入有误 （例：3000-5000）'}}" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                联系电话 (*)</label>
            <div class="controls">
                <input type="text" id="txtphone" name="Phone" placeholder="联系电话" class="span6 {required:true,number:true,messages:{number:'请输入数字'}}" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                QQ (*)</label>
            <div class="controls">
                <input type="text" id="txtQQ" name="QQ" placeholder="QQ号码" class="span6 {required:true,number:true,messages:{number:'请输入数字'}}" />
                <span class="help-block">填写QQ号码后，约稿人可直接与您发起QQ交谈</span>
            </div>
        </div>
        <hr />
        <div class="control-group">
            <div class="controls">
                <input id="btnsubmit" type="submit" value="立即投稿" class="btn btn-large btn-info" />
            </div>
        </div>
    </fieldset>
    </form>
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <input value="x" type="button" class="close" data-dismiss="modal" 
            aria-hidden="true"/>
        <h4 id="myModalLabel">
            选择期刊</h4>
        <i class="icon-list"></i>
        <select class="inline span2" disabled="disabled" id="sltBaseType_tag" name="IndType_tag">
        </select>
        -
        <select class="inline span2" disabled="disabled" id="sltindType_tag" name="SubIndType_tag">
        </select><br />
        <i class="icon-list"></i>
        <select class="inline span2" id="sltapt" name="Apt_tag" onchange="findtargetperiodical()">
            <option value="-1">不限</option>
        </select>
        -
        <select class="inline span2" disabled="disabled" id="sltlang" name="Lang_tag">
        </select>
    </div>
    <div class="modal-body">
        <div id="periodicalList" class="row-fluid">
        </div>
    </div>
    <div class="modal-footer">
        <input type="button" class="btn" data-dismiss="modal" aria-hidden="true" value="返回" />
        <input type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"
            value="确认" onclick="showtarget()" />
    </div>
</div>
@section tail
{
    <script type="text/javascript" src="/Scripts/plug.js"></script>
    <script type="text/javascript" src="/scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/scripts/jquery.metadata.js"></script>
    @if (journal != null)
    {
        <script type="text/javascript">
            $(function(){
                $('#sltBaseType').val(@((int)journal.IndType));
                $('#sltBaseType').trigger('change');
                $('#sltindType').val(@((int)journal.SubIndType));
                var aptitude = '@journal.Aptitude';
                $('input[name="AptitudeOption"]').each(function(){
                    if(aptitude.indexOf(';'+$(this).val()+';') >=0){
                        $(this).attr('checked','checked');
                    }
                });
                $('input[name="Language"][value="@((int)journal.Language)"]').trigger('click');
                $('#targetjournal').append(
                    $('<span class="span2" style="overflow:hidden;" />').append(
                        $('<label class="checkbox" />').append(
                            $('<input name="sltperiodical" type="checkbox" value="@journal.Id" checked="checked" >@journal.Name</input>')
                        )
                    )
                );
            });
        </script>
    }
    <script type="text/javascript">
        var periodicalList = [];
        new plug.Control().BuildRelationSelect('sltBaseType', 'sltindType', 'indtype');
        new plug.Control().BuildRelationSelect('sltBaseType_tag', 'sltindType_tag', 'indtype');
        new plug.Control().BuildSelect('sltlang', 'language');
        new plug.Control().BuildSelect({ element: 'sltapt', clear: false }, 'aptitude');
        function openjournalframe() {
            $('#sltBaseType_tag').val($('#sltBaseType').val());
            $('#sltBaseType_tag').trigger('change');
            $('#sltindType_tag').val($('#sltindType').val());
            $('#sltlang').val($('input:checked[name="Language"]').val());
            findtargetperiodical();
        }
        $('#form1').validate({
            errorClass: "help-inline",
            errorElement: "span",
            highlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
            },
            submitHandler: function (form) {
                if ($('input[name="AptitudeOption"]:checked').length == 0) {
                    alert('请选择期刊类型');
                    $('input[name="AptitudeOption"]').eq(0).focus();
                    return false;
                }
                var Aptitude = '';
                $('input[name="AptitudeOption"]:checked').each(function () {
                    Aptitude += $(this).val() + ';'
                });
                $('input[name="Aptitude"]').val(Aptitude);

                var selected = '';
                $('input[name="sltperiodical"]:checked').each(function () {
                    selected += $(this).val() + ';';
                });
                $('input[name="selectedJournal"]').val(selected);

                $('#btnsubmit').attr('disabled', 'disabled').val('附件上传中...');
            }
        });
        $(function () {
            $('#likindex').addClass('active');
        });


        function findtargetperiodical() {
            $.ajax({
                url: '/home/getPeriodical',
                type: 'get',
                data: {
                    ind: $('#sltBaseType_tag').val(),
                    subind: $('#sltindType_tag').val(),
                    apt: $('#sltapt').val(),
                    lang: $('#sltlang').val()
                },
                success: function (res) {
                    if (res != '') {
                        $('#periodicalList').html('');
                        periodicalList = eval('(' + res + ')');
                        if (periodicalList.length > 0) {
                            for (var i = 0, len = periodicalList.length; i < len; i++) {
                                $('#periodicalList').append(
                                    $('<span class="span4" style="overflow:hidden;"/>').append(
                                        $('<label class="checkbox"/>').append(
                                            $('<input value="' + periodicalList[i].Id + '" name="targetperiodical" type="checkbox" >' + periodicalList[i].Name + '</input>')
                                        )
                                    )
                                );
                            }
                        }
                    }
                }
            });
        }

        function showtarget() {
            //$('#targetjournal').html('');
            $('input[name="targetperiodical"]').each(function () {
                if ($(this).attr('checked') == "checked") {
                    var item;
                    for (var i = 0, len = periodicalList.length; i < len; i++) {
                        if (periodicalList[i].Id == $(this).val()) {
                            item = periodicalList[i];
                            if (item) {
                                $('#targetjournal').append(
                                    $('<span class="span2" style="overflow:hidden;" />').append(
                                       $('<label class="checkbox" />').append(
                                           $('<input name="sltperiodical" type="checkbox" value="' + item.Id + '" checked="checked" >' + item.Name + '</input>')
                                       )
                                    )
                                );
                            }
                        }
                    }
                }
            });
        }
    </script>
}
